<template>
	<view class="answer">
		<uni-nav-bar fixed background-color="transparent" color="#fff" :title="'苏格拉底问答'" @clickLeft="clickNavLeft()">
			<!-- 导航栏左侧插槽 -->
			<view slot="left">
				<u-icon name="arrow-left" size="40"></u-icon>
			</view>
		</uni-nav-bar>
		<view class="answer-content" id="answer-content">
			<!-- <view v-for="(item, idx) in chatList" :key="idx" :class="item.type == '答' ? 'chatself' : 'chatother'">
				<view class="title">{{item.type}}</view>
				<view :class="item.type == '答' ? 'chatbgvS' : 'chatbgvO'">{{ item.text }}</view>
			</view> -->

			<view v-for="(item, idx) in chatList" :key="idx" :class="item.type == '答' ? 'chatself' : 'chatother'"
				:id="'chatItem_' + idx">
				<view class="title">{{item.type}}</view>
				<view :class="item.type == '答' ? 'chatbgvS' : 'chatbgvO'">{{ item.text }}</view>
			</view>
		</view>
		<image :src="animationUrl" mode="widthFix" class="fox"></image>
		<view class="content">
			{{content}}
		</view>
		<view class="button">
			<view class="audio" @touchstart="audioTouchStart" @touchend="audioTouchEnd">
			</view>
			<!-- 	<image src="../../static/images/audio.png" @touchstart="audioTouchStart" @touchend="audioTouchEnd"
				mode="widthFix" class="audio"></image> -->
			<view class="wave w1" v-show="isTouch"></view>
			<view class="wave w2" v-show="isTouch"></view>
		</view>
	
	</view>
</template>

<script>
	import {
		sort_ascii,
		getMD5Screct
	} from "../../static/js/utils"
	import {
		Recorder
	} from '../../static/js/recorder'
	var recorder = null
	let innerAudioContexts = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				chatList: [],
				isTouch: false,
				content: '长按进行回答',
				title: '',
				scrollIntoIndex: '',
				animationlist: [],
				animationUrl: '',
				x: 0,
				y: 0,
				l: 0,
				t: 0,
				isDown: false,
			};
		},
		onLoad(option) {
			Recorder.get(rec => {
				recorder = rec
			})
			this.title = option.title || '';
			this.chatList = [{
				type: '题',
				text: this.title
			}];
			this.getList(1, this.title);
			this.getAnimationlist();
		},
		methods: {
			// 返回上一级
			clickNavLeft() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 获取动画列表
			getAnimationlist() {
				let data = {
					appKey: this.appkey,
					appSecret: this.appSecret,
					uid: this.uid.toString(),
				}
				let sign = sort_ascii(data);
				sign = getMD5Screct(sign);
				data.signature = sign;
				uni.request({
					method: "POST",
					url: `${this.baseUrl}/api/ai/animationlist`,
					data: data,
					success: (res) => {
						const {
							data
						} = res.data;
						this.animationlist = data;
					},
					fail: (err) => {
						console.log('请求失败_______________', err)
					}
				})

			},
			audioTouchStart() {
				innerAudioContexts.stop()
				this.isTouch = true;
				this.startRecording();
			},
			audioTouchEnd() {
				this.isTouch = false;
				this.stopRecording();
			},
			startRecording() {
				recorder.start()
			},
			stopRecording() {
				recorder.stop();
				this.getRecording();
			},
			getRecording() {
				let file = recorder.getBlob(); //得到需要的pcm文件
				const files = new window.File(
					[file],
					'test', {
						type: file.type
					}
				);
				this.getText(files, file.type)
			},
			getText(speech, type) {
				let data = {
					format: type.split("/")[1],
					rate: 8000,
					// speech: speech,
					cuid: "baidu_workshop",
				}
				uni.uploadFile({
					url: `${this.baseUrl}/api/baidu/baiduvoicetotext`,
					file: speech,
					name: 'speech', //后台接收字段名
					formData: data,
					success: (res) => {
						const mydata = JSON.parse(res.data);
						const text = mydata.data.text[0];
						this.chatList.push({
							type: "问",
							text
						});
						Recorder.get(rec => {
							recorder = rec
						})
						this.getList(2, text);
					},
					fail: (err) => {
						console.log('请求失败_______________', err)
					}
				})
			},
			//获取客户端ID
			getList(type, title) {
				let data = {
					appKey: this.appkey,
					appSecret: this.appSecret,
					msg: title,
					uid: this.uid.toString(),
				}
				let sign = sort_ascii(data);
				sign = getMD5Screct(sign);
				data.signature = sign;
				uni.request({
					url: `${this.baseUrl}/api/ai/index`,
					method: "POST",
					data: data,
					success: (res) => {
						const mydata = res.data;
						if (!mydata.data || !mydata.data.data) {
							uni.showToast({
								title: mydata.msg,
								icon: "none"
							})
							return
						}
						const {
							dialogList
						} = mydata.data.data;
						let list = [];
						dialogList.forEach(e => {
							if (e.audioUrl) {
								const obj = {
									type: "答",
									...e
								}
								list.push(obj);
							}
							if (e.npcName === '动画指令') {
								const idx = this.animationlist.findIndex(v => v.action === e.text)
								this.animationUrl = this.animationlist[idx].image;
							}
						})
						this.startSpeak(list, 0)
						this.chatList = [...this.chatList, ...list];
						setTimeout(() => {
							let div = document.getElementById('answer-content');
							div.scrollTop = div.scrollHeight;
						}, 500)
					},
				})
			},
			startSpeak(list, index) {
				const idx = index + 1;
				if (idx > list.length) {
					innerAudioContexts.src = '';
					return
				} else {
					innerAudioContexts.autoplay = true;
					innerAudioContexts.loop = false;
					if (!list[index]) {
						innerAudioContexts.stop();
						return
					}
					innerAudioContexts.src = list[index].audioUrl;
					innerAudioContexts.play();
					innerAudioContexts.onEnded(() => {
						this.startSpeak(list, idx)
					})

				}

			},
			// 跳转页面底部
			scrollToBottom() {
				let index = this.chatList.length - 1;
				this.scrollIntoIndex = 'chatItem_' + index;
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	.answer {
		height: 100vh;
		background-image: url("../../static/images/answerbg.png");
		background-size: 100% 100%;
		position: relative;

		.answer-content {
			height: 50vh;
			overflow-y: scroll;

			.title {
				width: 28px;
				font-size: 30rpx;
				font-family: Adobe Heiti Std;
				color: #FFFFFF;
			}

			.chatself {
				display: flex;
				flex-direction: row-reverse;
				width: 90%;
				margin-left: 5%;
				margin-top: 30rpx;
				margin-bottom: 10rpx;

				.title {
					text-align: right;
				}
			}

			.chatother {
				display: flex;
				width: 90%;
				margin-left: 5%;
				margin-top: 30rpx;
				margin-bottom: 10rpx;
			}

			.chatbgvS {
				color: #fff;
				padding: 20rpx;
				max-width: calc(90% - 140rpx);
				background: rgba(156, 223, 255, 0.9);
				border: 2px solid #BAFDFF;
				border-radius: 20rpx 0 20rpx 20rpx;
				letter-spacing: 4rpx;
				line-height: 40rpx;
			}

			.chatbgvO {
				color: #fff;
				padding: 20rpx;
				max-width: calc(90% - 140rpx);
				background: rgba(156, 223, 255, 0.9);
				border: 2px solid #BAFDFF;
				border-radius: 0 20rpx 20rpx 20rpx;
				letter-spacing: 4rpx;
				line-height: 40rpx;
			}
		}

		.fox {
			width: 50%;
			position: absolute;
			left: 25%;
			bottom: 17%;
		}

		.content {
			color: #fff;
			left: 0;
			right: 0;
			text-align: center;
			bottom: 14%;
			position: absolute;
		}

		.button {
			left: 0;
			right: 0;
			bottom: 12%;
			position: absolute;

			.audio {
				left: calc(50% - 67rpx);
				position: absolute;
				width: 134rpx;
				height: 134rpx;
				background: url("../../static/images/audios.gif");
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.wave {
				position: absolute;
				left: calc(50% - 75rpx);
				top: -25rpx;
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				background-attachment: fixed;
				background-position: center center;
			}

			.w1 {
				z-index: 2;
				border: 1px solid #fff;
				background-size: auto 106%;
				animation: wave 1s infinite;
			}

			.w2 {
				z-index: 3;
				border: 1px solid #fff;
				animation: wave 1s .5s infinite;
			}
		}

		@keyframes wave {
			0% {
				width: 100rpx;
				height: 100rpx;
				left: calc(50% - 50rpx);
				top: 0;
			}

			100% {
				left: calc(50% - 75rpx);
				top: -25rpx;
				width: 150rpx;
				height: 150rpx;
				opacity: 0.4;
			}
		}

		.desk {
			position: absolute;
			left: 20rpx;
			top: 10vh;
			width: 60px;

			//脱离文档流
			.desk-img {
				width: 60px;
			}
			.book {
				color: #FFFFFF;
			}
		}
	}
</style>
